$border: 1px dashed rgba(0, 0, 0, 0);

::ng-deep .preview dc-container dc-container-row.row {
  min-height: 100px;
  border: $border;
  &.active {
    border-color: grey;
  }
}

::ng-deep .preview.edit-mode {
  dc-container dc-container-row.row {
    border-color: rgba(0, 0, 0, .25);
    > dc-control-editor {
      left: -50px;
      .handle {
        display: none;
      }

      .add-component {
        display: inline-block;
      }
    }
    .col-sm dc-ui-flex-container + dc-control-editor {
      left: 60px;
    }
  }
}

::ng-deep .preview dc-ui-flex-container .item,
::ng-deep .preview dc-container .item,
::ng-deep .preview dc-container dc-container-row.row,
::ng-deep .preview dc-container dc-container-row.row > div[class*="col-"] {
  &:hover > dc-control-editor {
    display: block;
  }

  position: relative;
  border: $border;

  &.drag-selected {
    border-color: grey;
    dc-control-editor {
      display: block !important;
    }
  }

  dc-ui-flex-container + dc-control-editor > .handle {
    color: rgba(0, 0, 0, .75);
  }

  &:hover {
    dc-ui-flex-container + dc-control-editor > .handle {
      color: rgba(0, 0, 0, .8);
    }
  }

  dc-ui-flex-container + dc-control-editor {
    left: -50px;
  }
}

::ng-deep .preview dc-container.container dc-container-row.row > dc-control-editor {
  left: -50px;
}

::ng-deep {
  /* in-flight clone */
  .gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    pointer-events: none;

    box-sizing: border-box;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
    background: #eeeeee;

    > dc-control-editor {
      display: block !important;
    }

    > dc-ui-flex-container + dc-control-editor {
      left: -50px;
    }
  }
  /* high-performance display:none; helper */
  .gu-hide {
    left: -9999px !important;
  }
  /* added to mirrorContainer (default = body) while dragging */
  .gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  /* added to the source element while its mirror is dragged */
  .gu-transit {
    position: relative;
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);

    &::after {
      content: ' ';
      top: 0;
      display: block;
      position: absolute;
      background: #ccc;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    dc-control-editor {
      display: none !important;
    }
  }
}



:host {
  position: absolute;
  color: rgba(0, 0, 0, .5);
  top: 0;
  right: 0;
  z-index: 2;
  max-width: 105px;
  display: none;
  background: rgba(0, 0, 0, .25);
  border-radius: 4px;
  &:hover {
    cursor: move;
    color: rgba(0, 0, 0, .75);
  }

  ::ng-deep button {
    height: 35px;
    line-height: 35px;
    width: 35px;
  }

  .add-component {
    display: none;
  }
}
